<template>
  <div class="star-diagram-view">
    <!-- <main style="width: 100%;height: 100%;">
      <star-diagram />
    </main> -->
  </div>
</template>

<script>
import * as d3 from "d3";
// import StarDiagram from '@/components/StarDiagram/StarDiagram.vue';
// import sDiagram from '@/components/StarDiagram/sDiagram.vue';
// import citation_vis from '@/components/StarDiagram/citation vis.vue';

export default {
  name: 'StarDiagramView',
  // components: {
  //   'star-diagram': sDiagram,
  // },
  mounted() {
    // 设置图表的尺寸和边距
    const width = 100;
    const height = 100;
    const margin = { top: 10, right: 10, bottom: 10, left: 10 };

    // 将 svg 对象添加到页面的 body 部分
    const svg = d3.select(".star-diagram-view").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // 绘制圆圈
    const circleRadius = 50;
    svg.append("circle")
      .attr("r", circleRadius)
      .style("fill", "none")
      .style("stroke", "black");

    // 绘制刻度
    const totalTicks = 61;
    const tickLength = 10;
    for (let i = 0; i < totalTicks; i++) {
      const angle = (i / totalTicks) * Math.PI * 2;
      const x1 = circleRadius * Math.cos(angle);
      const y1 = circleRadius * Math.sin(angle);
      const x2 = (circleRadius - tickLength) * Math.cos(angle);
      const y2 = (circleRadius - tickLength) * Math.sin(angle);

      svg.append("line")
        .attr("x1", x1)
        .attr("y1", y1)
        .attr("x2", x2)
        .attr("y2", y2)
        .style("stroke", "black");
    }

  }
}
</script>

<style scoped>
.star-diagram-view {
  display: flex;
  flex-direction: column;
}
</style>